{% extends 'admin/admin_base.html' %}

{% block title %}{{ '编辑用户' if user else '创建用户' }} - 后台管理系统{% endblock %}

{% block nav_users %}active{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <h2>{{ '编辑用户' if user else '创建用户' }}</h2>
    <a href="{{ url_for('admin.user_list') }}" class="btn btn-secondary">返回用户列表</a>
</div>

<div class="card">
    <div class="card-body">
        <form method="post" class="needs-validation" novalidate>
            <div class="mb-3">
                <label for="username" class="form-label">用户名</label>
                <input type="text" class="form-control" id="username" name="username" 
                       value="{{ user.username if user else '' }}" required>
                <div class="invalid-feedback">
                    请输入用户名
                </div>
            </div>

            <div class="mb-3">
                <label for="password" class="form-label">
                    {% if user %}
                    新密码（留空表示不修改）
                    {% else %}
                    密码
                    {% endif %}
                </label>
                <input type="password" class="form-control" id="password" name="password"
                       {% if not user %}required{% endif %}>
                <div class="invalid-feedback">
                    请输入密码
                </div>
            </div>

            <div class="mb-3">
                <label for="email" class="form-label">邮箱</label>
                <input type="email" class="form-control" id="email" name="email"
                       value="{{ user.email if user else '' }}">
            </div>

            <div class="mb-3">
                <label for="grade" class="form-label">年级</label>
                <select class="form-select" id="grade" name="grade">
                    <option value="">请选择年级</option>
                    <option value="1" {% if user and user.grade == '1' %}selected{% endif %}>一年级</option>
                    <option value="2" {% if user and user.grade == '2' %}selected{% endif %}>二年级</option>
                    <option value="3" {% if user and user.grade == '3' %}selected{% endif %}>三年级</option>
                    <option value="4" {% if user and user.grade == '4' %}selected{% endif %}>四年级</option>
                    <option value="5" {% if user and user.grade == '5' %}selected{% endif %}>五年级</option>
                    <option value="6" {% if user and user.grade == '6' %}selected{% endif %}>六年级</option>
                    <option value="7" {% if user and user.grade == '7' %}selected{% endif %}>初一</option>
                    <option value="8" {% if user and user.grade == '8' %}selected{% endif %}>初二</option>
                    <option value="9" {% if user and user.grade == '9' %}selected{% endif %}>初三</option>
                </select>
            </div>

            <div class="mb-3">
                <div class="form-check">
                    <input type="checkbox" class="form-check-input" id="is_admin" name="is_admin"
                           {% if user and user.is_admin %}checked{% endif %}>
                    <label class="form-check-label" for="is_admin">
                        管理员权限
                    </label>
                </div>
            </div>

            <div class="d-grid gap-2">
                <button type="submit" class="btn btn-primary">
                    {{ '保存修改' if user else '创建用户' }}
                </button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// 表单验证
(function () {
    'use strict'
    var forms = document.querySelectorAll('.needs-validation')
    Array.prototype.slice.call(forms).forEach(function (form) {
        form.addEventListener('submit', function (event) {
            if (!form.checkValidity()) {
                event.preventDefault()
                event.stopPropagation()
            }
            form.classList.add('was-validated')
        }, false)
    })
})()
</script>
{% endblock %}
